<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门案例</title>
    <!--
        引入vue的js库
    -->
    <script src="../js/vue.js"></script>
</head>
<body>
<!--view:html页面部分-->
<div id="app">
    <input type="text" v-model="name"><!--v-model="name"表示与Vue对象中的name双向绑定-->
    <div style="background-color: #3bd233">
        {{name}}<!--{{}}称为插值表达式,中间name表示与Vue对象中的name双向绑定-->
    </div>
</div>
</body>
<!--js部分：数据和逻辑-->
<script>
    new Vue({//固定格式,新建Vue对象
        el: "#app",//用选择器指定Vue管控的区域,此处指定id为app,格式同CSS选择器
        data: {//定义数据键值对
            name: "321"/*与视图中的name双向绑定*/
        }
    })
</script>
</html>